<template>
  <div class="header">
    <div class="header-top flex-between flex-align-items-center"
      :class="{ 'header-is-scroll': scrollTop > 0 || menuCheck === 1 || menuCheck === undefined }">
      <img v-if="scrollTop === 0 && menuCheck !== 1 && menuCheck !== undefined" src="@/assets/logo-light.png"
        class="logo pointer" @click="toHomePage">
      <img v-else src="@/assets/logo.png" class="logo pointer" @click="toHomePage">
      <div class="header-top-center flex">
        <div v-for="(item, index) in menus" :key="index" class="font-14 pointer"
          :class="{ 'font-14-B': menuCheck === index, active: menuCheck === index }" @click="menuHandle(item)">{{
            item.name }}
        </div>
      </div>
      <div class="header-top-right flex flex-align-items-center">
        <div class="header-top-right-item flex-center flex-align-items-center pointer">
          <i class="iconfont icon-kefu"></i>
        </div>
        <el-popover placement="bottom-end" :width="300" trigger="hover" :show-arrow="false">
          <template #reference>
            <div class="header-top-right-item flex-center flex-align-items-center pointer">
              <i class="iconfont icon-notice"></i>
            </div>
          </template>
          <div class="notice-popup">
            <div class="notice-popup-top flex-between flex-align-items-center">
              <div class="notice-popup-top-left font-14">消息通知</div>
              <div class="notice-popup-top-right flex">
                <p class="font-12 pointer" @click="toNotice">查看全部</p>
                <p class="font-12 pointer" @click="toRead">一键已读</p>
              </div>
            </div>
            <div class="notice-main">
              <div v-if="noticeList.length === 0" class="no-data flex-center flex-column flex-align-items-center">
                <img src="@/assets/default-1.png">
                <p class="font-12">暂无消息</p>
              </div>
              <div v-for="item in noticeList" :key="item.id" class="notice-item pointer" @click="openNoticeDetail(item)">
                <div class="flex-between">
                  <p class="nitice-name font-12 ellipsis-1">{{ item.name }}</p>
                  <p class="notice-time font-12">{{ item.time }}</p>
                </div>
                <p class="notice-content font-12 ellipsis-1">{{ item.content }}</p>
              </div>
            </div>
          </div>
        </el-popover>
        <el-popover v-if="userInfo" placement="bottom-end" :width="280" trigger="hover" :show-arrow="false" effect="dark">
          <template #reference>
            <img src="@/assets/avatar.png" class="header-top-right-avatar pointer">
          </template>
          <div class="personal-popup">
            <div class="personal-popup-top flex flex-align-items-center">
              <img src="@/assets/avatar.png" class="personal-popup-top-left">
              <div class="personal-popup-top-right">
                <p class="font-20-B">{{ userInfo.name }}</p>
                <p v-if="userInfo.member === '普通会员'" class="font-14">{{ userInfo.member }}</p>
                <img v-else :src="memberObj[userInfo.member]">
              </div>
            </div>
            <div class="personal-main">
              <div v-for="(item, index) in personalMenus" :key="index" class="flex flex-align-items-center pointer"
                @click="personalMenuHandle(item)">
                <img :src="item.icon">
                <p>{{ item.name }}</p>
              </div>
            </div>
          </div>
        </el-popover>
        <div v-else class="login-btn font-14-B pointer" @click="toLogin">登录/注册</div>
      </div>
    </div>
  </div>

  <notice-detail v-if="noticeDetail.show" :id="noticeDetail.id" @close="noticeDetail.show = false"></notice-detail>
</template>

<script setup>
import NoticeDetail from '@/components/noticeDetail.vue';
import { ref, watch, defineProps } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import api from '@/api/index.js';

const router = useRouter();
const store = useStore();

const props = defineProps(['scrollTop', 'menuCheck']);
console.log(props)

const memberObj = {
  '专业版': require('../assets/img-vip-2.jpg'),
  '高级专业版': require('../assets/img-vip-2.jpg'),
  '企业版': require('../assets/img-vip-2.jpg')
}

const menus = [
  {
    name: '红人搜索',
    path: '/'
  },
  {
    name: '会员权益',
    path: '/kocVip'
  },
  {
    name: '使用教学',
    path: '/teach'
  },
  {
    name: '工作台',
    login: true,
    path: '/adminKanBan'
  }
];
const personalMenus = [
  {
    name: '使用教学',
    path: '/teach',
    icon: require('../assets/menu-icon-1.png')
  },
  {
    name: '访问官网',
    path: '2',
    icon: require('../assets/menu-icon-2.png')
  },
  {
    name: '意见反馈',
    path: '3',
    icon: require('../assets/menu-icon-3.png')
  },
  {
    name: '团队管理',
    path: '/teamManage',
    icon: require('../assets/menu-icon-4.png')
  },
  {
    name: '退出登陆',
    icon: require('../assets/menu-icon-5.png')
  }
]

const userInfo = ref(store.state.userInfo);
const noticeList = ref([
  {
    id: 1,
    name: '标题',
    content: '内容内容内容内容内容内容内容内容内容内容内容内容',
    time: '2023-12-11'
  }
]);
const noticeDetail = ref({
  show: false,
  id: null
});

// 跳转首页
const toHomePage = () => {
  router.push('/');
}
// 点击顶部菜单
const menuHandle = item => {
  if (item.login && userInfo.value === null) {
    toLogin();
  } else if (item.path) {
    router.push(item.path);
  }
}
// 点击个人栏菜单
const personalMenuHandle = item => {
  if (item.path) {
    router.push(item.path);
  } else {
    logout();
  }
}
// 跳转登录页
const toLogin = () => {
  router.push('/login');
}
// 查看全部消息
const toNotice = () => {
  if (userInfo.value) {
    router.push('/noticeList');
  } else {
    toLogin();
  }
}
// 消息一键已读
const toRead = () => {
  if (userInfo.value) {
    console.log('已读操作');
  } else {
    toLogin();
  }
}
// 打开通知详情
const openNoticeDetail = item => {
  noticeDetail.value = {
    show: true,
    id: item.id
  }
}
// 退出登录
const logout = () => {
  api.login.logout().then(() => {
    store.commit('userInfoChange', null);
    store.commit('tokenChange', null);
    localStorage.clear();
    userInfo.value = null;
    router.push('/login');
  });
}

watch(store.state, newValue => {
  userInfo.value = newValue.userInfo;
});
</script>

<style lang="less" scoped>
.header {
  .header-top {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    padding: 0 40px;
    width: 100%;
    min-width: 1260px;
    height: 60px;

    .logo {
      height: 40px;
    }

    &.header-is-scroll {
      background: #fff;

      .header-top-center .active,
      .header-top-center div:hover {
        color: #333;
      }

      .header-top-right-item {
        background: #f8f8f8;

        i {
          color: #666;
        }
      }
    }

    &:not(.header-is-scroll) {

      .header-top-center .active,
      .header-top-center div:hover {
        color: #fff;
      }

      .header-top-right-item {
        background: hsla(0, 0%, 98%, .2);

        i {
          color: #fff;
        }
      }
    }
  }

  .header-top-center {
    div {
      color: #999;
      width: 100px;
      height: 60px;
      line-height: 60px;
      text-align: center;

      &.active {
        position: relative;

        &::after {
          content: "";
          width: 40px;
          height: 2px;
          background: @main-color;
          border-radius: 1px;
          font-weight: 700;
          position: absolute;
          bottom: 12px;
          left: calc(50% - 20px);
        }
      }
    }
  }

  .header-top-right-item {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    justify-content: center;
    cursor: pointer;
    position: relative;
    margin-right: 16px;

    &:hover {
      background: @main-color !important;

      i {
        color: #fff !important;
      }
    }
  }

  .header-top-right-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .login-btn {
    width: 96px;
    height: 40px;
    background: #f85277;
    border-radius: 8px;
    color: #fff;
    text-align: center;
    line-height: 40px;

    &:hover {
      background: #af2a47;
    }
  }
}

.notice-popup {
  padding: 0 16px;

  .notice-popup-top {
    height: 46px;
    border-bottom: 1px solid #e5e7eb;

    .notice-popup-top-left {
      color: #333;
    }

    .notice-popup-top-right {
      p {
        color: #bbb;
        margin-left: 16px;
        border-bottom: 1px solid #bbb;
      }
    }
  }

  .notice-main {
    padding: 16px 0;

    .no-data {
      height: 290px;

      img {
        height: 60px;
        height: 60px;
        margin-bottom: 24px;
      }

      p {
        color: #cecece;
      }
    }

    .notice-item {
      padding-bottom: 8px;
      margin-bottom: 16px;
      border-bottom: 1px solid #ebedf0;

      &:last-child {
        margin-bottom: 0;
      }

      .notice-name {
        color: #333;
      }

      .notice-time {
        color: #999;
      }

      .notice-content {
        color: #666;
        margin-top: 4px;
      }
    }
  }
}

.personal-popup {
  background: #fff;
  border-radius: 10px;

  .personal-popup-top {
    height: 116px;
    padding: 26px 16px 0;
    background: url(@/assets/user-bg.png) no-repeat;
    background-size: cover;

    .personal-popup-top-left {
      width: 60px;
      height: 60px;
      border-radius: 10px;
      margin-right: 12px;
    }

    .personal-popup-top-right {
      p {
        &:first-child {
          color: #fff;
          margin-bottom: 5px;
        }

        &:last-child {
          width: 74px;
          height: 26px;
          border: 1px solid @main-color;
          color: @main-color;
          background: #fff;
          text-align: center;
          line-height: 24px;
        }
      }

      img {
        height: 26px;
      }
    }
  }

  .personal-main {
    padding: 17px 0 24px;

    div {
      padding-left: 16px;
      margin-bottom: 24px;

      &:last-child {
        padding-top: 24px;
        margin-bottom: 0;
        border-top: 1px solid #f2f2f2;
      }

      img {
        width: 14px;
        height: 14px;
        margin-right: 8px;
      }

      p {
        color: #333;
      }
    }
  }
}
</style>
